<!--
 * @Author: 张辰龙 zhangchenlong@julimeng.com
 * @Date: 2025-04-18 15:24:59
 * @LastEditors: 张辰龙 zhangchenlong@julimeng.com
 * @LastEditTime: 2025-04-18 16:04:18
 * @FilePath: /managehub-admin-web/src/views/article/imData/components/jubaoList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <el-dialog :title="`${dettailInfo.nickname}的被举报详情`" :visible.sync="dialogVisible" width="800px">
            <el-table border :data="tavleData.data" v-loading="listLoading">
                <el-table-column prop="id" align="center" label="举报ID"></el-table-column>
                <el-table-column prop="nickname" align="center" label="举报人"></el-table-column>
                <el-table-column prop="msgBody" align="center" label="举报消息" width="200">
                    <template slot-scope="scope">
                        <div class="msg-body-file" v-if="scope.row.msgType == 6">
                            <audio :src="scope.row.msgBody" controls="controls" style="width: 160px; "></audio>
                        </div>
                        <div class="msg-body-file" v-if="scope.row.msgType == 7">
                            <video :src="scope.row.msgBody" controls="controls" style="width: 160px" height="100px"></video>
                        </div>
                        <div class="msg-body-file" v-if="scope.row.msgType == 4">
                           <el-image :src="scope.row.msgBody" style="width: 160px; height: 160px;" :preview-src-list="[scope.row.msgBody]"></el-image>
                        
                        </div>
                        <div class="msg-body-file" v-if="scope.row.msgType == 1">
                           <span>{{ scope.row.msgBody }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="dictTipOffCateDesc" align="center" label="举报内容"></el-table-column>
                <el-table-column prop="createTime" align="center" label="举报时间"></el-table-column>
                <el-table-column prop="reportStatus" align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="seeDetail(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pageRight">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    layout="total, sizes,prev, pager, next,jumper" :current-page.sync="where.pageNum"
                    :page-size="where.pageSize" :page-sizes="[10, 15, 20]" :total="tavleData.total">
                </el-pagination>
            </div>
        </el-dialog>
        <jubaoDetail ref="jubaoDetailRef"></jubaoDetail>
    </div>
</template>

<script>
import { getImsReportRecord, getImsMemberChatRecord } from '@/api/im'
import jubaoDetail from './jubaoDetail.vue'
export default {
    components: {
        jubaoDetail
    },
    data() {
        return {
            dialogVisible: false,
            dettailInfo: {},
            where: {
                pageNum: 1,
                pageSize: 10,
                toSocialId: ''
            },
            tavleData: {
                data: [],
                total: 0
            },
            listLoading: false
        }
    },
    methods: {
        handleSizeChange(val) {
            this.where.pageSize = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.where.pageNum = val
            this.getList()
        },
        getList() {
            this.listLoading = true
            getImsReportRecord(this.where).then(res => {
                this.tavleData.data = res.data.list
                this.tavleData.total = res.data.total
            }).finally(() => {
                this.listLoading = false
            })
        },
        opendialog(v) {
            this.dettailInfo = v
            console.log(v);
            this.where.toSocialId = v.socialId
            this.dialogVisible = true
            this.getList()
        },
        seeDetail(v) {
            console.log(v);
            this.$refs.jubaoDetailRef.opendialog(v)
            // let params = {
            //     convId: v.convId,
            //     pageNum: 1,
            //     pageSize: 10
            // }
            // getImsMemberChatRecord(params).then(res => {
            //     console.log(res);
            // })
        }
    }
}
</script>

<style></style>